<template>
    <div class="product-charts phoneBac">
        <div class="phone_chart_title" v-if="isPhone">
            <span class="title">{{ titleName }}</span>
            <span class="close el-icon-close" alt @click="close()" />
        </div>
        <span v-else class="close el-icon-close" alt @click="close()" />
        <div id="charts"></div>
    </div>
</template>
<script>
export default {
    name: 'choiceCharts',
    data() {
        return {
            charts: null,
            titleName: null,
            isPhone: this.$store.state.isPhone,
            mapList: {
                NDVI: {
                    name: '归一化植被指数',
                    factor: 1000,
                },
                LAI: {
                    name: '叶面积指数',
                    factor: 1000,
                },
                REF: {
                    name: '地表反射率',
                    factor: 10000,
                },
                FVC: {
                    name: '植被覆盖度',
                    factor: 10000,
                },
                ALBEDO: {
                    name: '反照率',
                    factor: 10000,
                },
            },
            areaStyle: {
                color: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: 'rgba(0,179,244,0.3)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,179,244,0)',
                        },
                    ],
                    false
                ),
                shadowColor: 'rgba(0,179,244, 0.9)',
                shadowBlur: 20,
            },
            phoneAreaStyle: {
                color: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: 'rgba(115,226,248,0.8)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,179,244,0)',
                        },
                    ],
                    false
                ),
                shadowColor: 'rgba(115,226,248, 0.9)',
                shadowBlur: 5,
            },
            option: {
                tooltip: {
                    trigger: 'item',
                },
                grid: {
                    left: '10%',
                    top: '15%',
                    bottom: '10%',
                    right: '10%',
                    containLabel: true,
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{a}<br />{b}: {c}%',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#000',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'left',
                        name: '灰度值',
                        nameTextStyle: {
                            color: '#fff',
                            align: 'center',
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(135,140,147,0.8)',
                            },
                        },
                        axisLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            formatter: '{value}',
                            color: '#fff',
                            fontSize: 11,
                        },
                    },
                ],
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: true,
                        },
                        boundaryGap: false,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#0696f9',
                            },
                        },
                        gridIndex: 0,
                        axisLabel: {
                            inside: false,
                            color: '#fff', // x轴颜色
                            fontWeight: 'normal',
                            fontSize: '11',
                            rotate: -90,
                        },
                        data: [],
                    },
                ],
                series: [],
            },
            phoneOption: {
                tooltip: {
                    trigger: 'item',
                },
                grid: {
                    left: '8%',
                    top: '15%',
                    bottom: '10%',
                    right: '8%',
                    containLabel: true,
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{a}<br />{b}: {c}%',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#000',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'left',
                        name: '灰度值',
                        nameTextStyle: {
                            color: '#73E2F8',
                            align: 'center',
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(135,140,147,0.6)',
                            },
                        },
                        axisLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            formatter: '{value}',
                            color: '#73E2F8',
                            fontSize: 11,
                        },
                    },
                ],
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#73E2F8',
                            },
                        },
                        boundaryGap: false,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#0696f9',
                            },
                        },
                        gridIndex: 0,
                        axisLabel: {
                            inside: false,
                            color: '#73E2F8', // x轴颜色
                            fontWeight: 'normal',
                            fontSize: '11',
                            rotate: -90,
                            // formatter: value => {
                            //     let wordNum = 10;
                            //     let strs = value.split('');
                            //     let str = '';
                            //     let i = 0;
                            //     let s = '';
                            //     for (i, s; s; i++) {
                            //         s = strs[i];
                            //         str += s;
                            //         if (!(i % wordNum)) str += '\n';
                            //     }
                            //     return str;
                            // }
                        },
                        data: [],
                    },
                ],
                series: [],
            },
        };
    },
    methods: {
        // 构建图表
        initCharts(data) {
            let options = this.isPhone ? this.phoneOption : this.option;
            options.xAxis.data = [];
            options.series = [];
            let arr = [];
            let tempDate = data[0].date;
            this.titleName = this.mapList[this.$parent.getType()].name;
            data.forEach(element => {
                if (arr.indexOf(element.date) <= -1) {
                    arr.push(element.date);
                }
                if (tempDate === element.date) {
                    options.yAxis[0].name = this.isPhone
                        ? ''
                        : this.mapList[this.$parent.getType()].name;
                    options.series.push({
                        name: this.mapList[this.$parent.getType()].name,
                        type: 'line',
                        data: [],
                        lineStyle: {
                            color: this.isPhone ? '#1FE2FB' : 'rgba(0, 0, 0, .3)',
                        },
                        itemStyle: {
                            color: this.isPhone ? '#fff' : 'rgba(0, 0, 0, .3)',
                            borderWidth: 5,
                            // color: '#0696f9',
                        },
                        areaStyle: this.isPhone ? this.phoneAreaStyle : this.areaStyle,
                    });
                }
            });
            data.forEach(element => {
                if (element.average !== undefined && element.average !== null) {
                    options.series[element.band - 1].data.push(
                        element.average / this.mapList[this.$parent.getType()].factor
                    );
                }
            });
            options.xAxis[0].data = arr;
            if (!this.charts) {
                this.charts = this.$echarts.init(document.getElementById('charts'));
            }
            this.charts.clear();
            this.charts.setOption(options);
            // this.chartsShow = true;
        },
        // 关闭图表
        close() {
            this.$parent.closeCharts(false);
        },
    },
};
</script>
<style lang="scss" scope>
.product-charts {
    background: url('./theme/img/background2.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: fixed;
    top: 25%;
    right: 5%;
    height: 400px;
    color: rgba(184, 185, 187, 1);
    line-height: 18px;
    z-index: 2;
    width: 450px;
    .close {
        float: right;
        margin-right: 20px;
        cursor: pointer;
        width: 20px;
        margin-top: 4px;
        z-index: 1111;
        float: right;
        color: #00e3e4;
        cursor: pointer;
        margin-top: 13px;
        font-size: 22px;
        &:hover {
            color: #f5dd17;
        }
    }
    #charts {
        margin-top: 38px;
        width: 450px;
        height: 360px;
    }
}
</style>
